<!-- <template lang="html">
    <div class="publicBox">
        <div class="publicBoxTitle pubTitle">
            基本信息
        </div>
        <el-form ref="shopInformation" :model="shopInformation" label-width="150px">
            <div class="publicBoxContent information">
                <el-form-item label="商户名称：">
                    <span>{{shopInformation && shopInformation.operator_name}}</span>
                </el-form-item>
                <el-form-item label="商户账号：">
                    <span>{{shopInformation && shopInformation.user_name}}</span>
                </el-form-item>
                <el-form-item label="商户姓名：">
                    <span>{{shopInformation && shopInformation.user_nick}}</span>
                </el-form-item>
                <el-form-item label="商户手机号：">
                    <span>{{shopInformation && shopInformation.user_phone}}</span>
                </el-form-item>
            </div>
            <div class="publicBoxTitle pubTitle">
                商户认证
            </div>
            <div class="publicBoxContent information">
                <el-form-item label="营业执照：">
                    <div class="imgList">
                        <img :src="shopInformation && imgUrl+shopInformation.operator_business"
                             alt="营业执照">
                    </div>
                </el-form-item>
                <el-form-item label="商户身份证正反面：">
                    <div class="imgList">
                        <img :src="shopInformation && imgUrl+shopInformation.id_card_just"
                             alt="商户身份证正面">
                        <img :src="shopInformation && imgUrl+shopInformation.id_card_back"
                             alt="商户身份证反面">
                    </div>
                </el-form-item>
                <el-form-item label="其他证件：">
                    <div class="imgList">
                        <img v-for="(item,index) in shopInformation && JSON.parse(shopInformation.other_card)" :key="index" :src="imgUrl+item"
                             alt="其他证件">
                    </div>
                </el-form-item>
            </div>
        </el-form>
    </div>
</template> -->

<template>
    <div class="home">
        <div class="mall-layout-home-header">
            <homeTop></homeTop>
        </div>
        <div class="mall-layout-main">
            <div class="html-entry-room">
                <div class="MallLayout_main__l4L1u">
                    <div class="MallLayout_menu__pn3W7">
                        <span :class="show == 'one' ? 'MallLayout_menu-item__qqQ9O MallLayout_active__xxLnk' : 'MallLayout_menu-item__qqQ9O'" @click="showbox('one')">账号信息
                            <img src="https://static.xyb2b.com/images/5844c2f13f8e9075ac71e3aa646a4124.png" class="MallLayout_menu-item-icon__LRAwD" alt="">
                        </span>
                        <span :class="show == 'two' ? 'MallLayout_menu-item__qqQ9O MallLayout_active__xxLnk' : 'MallLayout_menu-item__qqQ9O'" @click="showbox('two')">账户安全
                            <img src="https://static.xyb2b.com/images/5844c2f13f8e9075ac71e3aa646a4124.png" class="MallLayout_menu-item-icon__LRAwD" alt="">
                        </span>
                    </div>
                    <div class="MallLayout_content__w" v-show="show == 'one'">
                        <div class="member-account-main" style="display: flex;">
                            <div class="uesr-logo">
                                <img style="width: 100%;height: 100%;" src="../../assets/img/index/good.jpg" alt="">
                            </div>
                            <div class="member-account-form-item-container">
                                <div class="items">
                                    <div class="item-left"><span style="color: red;margin-right: 5px;">*</span>会员名</div>
                                    <div class="item-right">
                                        <el-input></el-input>
                                    </div>
                                </div>
                                <div class="items">
                                    <div class="item-left">登录邮箱</div>
                                    <div class="item-right">
                                        <div class="active">点击进入邮箱设置页面></div>
                                    </div>
                                </div>
                                <div class="items">
                                    <div class="item-left">手机号码</div>
                                    <div class="item-right">
                                        <div>12345678974</div>
                                    </div>
                                </div>
                                <div class="items">
                                    <el-button type="primary" size="small">提交</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="MallLayout_content__w" v-if="show == 'two'">
                        <div class="Security_title__SaZEc">账户安全</div>
                        <div class="UserLevel_level__qEoj8">
                            <span>您的账号安全等级为</span>
                            <ul class="UserLevel_level-list__crSbk">
                                <li class="UserLevel_level-item__cuvd8 UserLevel_level-item-active__y6Q9e"></li>
                                <li class="UserLevel_level-item__cuvd8 UserLevel_level-item-active__y6Q9e"></li>
                                <li class="UserLevel_level-item__cuvd8"></li>
                            </ul>
                            <span>中</span>
                        </div>
                        <div class="UserForm_form__CdhMk">
                            <div class="UserForm_row__1tVYC">
                                <div class="UserForm_col__IHNDt">
                                    <img src="https://static.xyb2b.com/images/7175e6bf636b191adf1c387432e14686.png" class="UserForm_row-icon__cbJV-" alt="">
                                    <span>邮箱验证</span>
                                </div>
                                <div class="UserForm_col__IHNDt">未验证</div>
                                <div class="UserForm_col__IHNDt"></div>
                                <div class="UserForm_col__IHNDt UserForm_col-btn__kjKyE">
                                    <el-button type="primary" plain size="small">主要按钮</el-button>
                                </div>
                            </div>
                            <div class="UserForm_row__1tVYC">
                                <div class="UserForm_col__IHNDt">
                                    <!-- <img src="https://static.xyb2b.com/images/7175e6bf636b191adf1c387432e14686.png" class="UserForm_row-icon__cbJV-" alt=""> -->
                                    <img src="https://static.xyb2b.com/images/56619e93a04ea5f0ccfd0d446ec91d5d.png" class="UserForm_row-icon__cbJV-" alt="">
                                    <span>修改密码</span>
                                </div>
                                <div class="UserForm_col__IHNDt">未验证</div>
                                <div class="UserForm_col__IHNDt"></div>
                                <div class="UserForm_col__IHNDt UserForm_col-btn__kjKyE">
                                    <el-button type="primary" plain size="small">主要按钮</el-button>
                                </div>
                            </div>
                            <div class="UserForm_row__1tVYC">
                                <div class="UserForm_col__IHNDt">
                                    <img src="https://static.xyb2b.com/images/7175e6bf636b191adf1c387432e14686.png" class="UserForm_row-icon__cbJV-" alt="">
                                    <span>验证手机号</span>
                                </div>
                                <div class="UserForm_col__IHNDt">未验证</div>
                                <div class="UserForm_col__IHNDt"></div>
                                <div class="UserForm_col__IHNDt UserForm_col-btn__kjKyE">
                                    <el-button type="primary" plain size="small">主要按钮</el-button>
                                </div>
                            </div>
                            <div class="UserForm_row__1tVYC">
                                <div class="UserForm_col__IHNDt">
                                    <!-- <img src="https://static.xyb2b.com/images/7175e6bf636b191adf1c387432e14686.png" class="UserForm_row-icon__cbJV-" alt=""> -->
                                    <span>注销账号</span>
                                </div>
                                <div class="UserForm_col__IHNDt">注销后无法恢复，请谨慎操作</div>
                                <div class="UserForm_col__IHNDt"></div>
                                <div class="UserForm_col__IHNDt UserForm_col-btn__kjKyE">
                                    <el-button type="primary" plain size="small">去注销</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <homefooter></homefooter>
        </div>
    </div>
</template>

<script>
    import homeTop from '../assembly/top'
    import homefooter from '../assembly/footer'
    export default {
        components: {
            homeTop,
            homefooter
        },
        data() {
            return {
                show: 'one'
            }
        },
        created() {

        },
        methods: {
            showbox(val) {
                this.show = val
            },
        }
    }
</script>

<style lang="scss" scoped>
    .mall-layout {
        position: relative;
        width: 100%;
    }
    
    .mall-layout-main {
        min-height: calc(100vh - 200px);
        margin: 0 auto;
        padding-top: 24px;
        background-color: #fff !important;
    }
    
    .html-entry-room {}
    
    .MallLayout_main__l4L1u {
        display: flex;
        height: 100%;
        margin: 15px auto 0;
        width: 1200px;
    }
    
    .MallLayout_menu__pn3W7 {
        background: #fff;
        border: 1px solid #dcdee0;
        border-radius: 8px;
        margin-right: 20px;
        padding: 10px;
        width: 180px;
    }
    
    .MallLayout_menu-item__qqQ9O {
        display: block;
        font-weight: 700;
        /* height: 40px; */
        line-height: 20px;
        margin-bottom: 15px;
        padding: 10px 15px;
        position: relative;
    }
    
    .MallLayout_active__xxLnk {
        background-color: #f1f9fc;
        color: var(--antd-wave-shadow-color);
    }
    
    .MallLayout_menu-item-icon__LRAwD {
        height: 8px;
        position: absolute;
        right: 15px;
        top: 16px;
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
        width: 8px;
    }
    
    .MallLayout_content__w {
        flex: 1 1;
        padding: 20px;
    }
    
    .member-account-main {}
    
    .uesr-logo {
        width: 80px;
        height: 80px;
    }
    
    .member-account-form-item-container {
        margin-left: 60px;
        min-width: 600px;
    }
    
    .items {
        display: flex;
        flex-flow: row wrap;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        color: rgba(0, 0, 0, 0.85);
        font-size: 14px;
        font-variant: tabular-nums;
        line-height: 1.5715;
        list-style: none;
        font-feature-settings: 'tnum', "tnum";
        margin-bottom: 24px;
        vertical-align: top;
    }
    
    .item-left {
        width: 100px;
        height: 32px;
        display: flex;
        align-items: center;
    }
    
    .item-right {
        display: flex;
        align-items: center;
    }
    
    .active {
        color: #656efe;
        cursor: pointer;
    }
    
    /deep/.el-input__inner {
        height: 32px;
        line-height: 32px;
    }
    
    .Security_title__SaZEc {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 20px;
    }
    
    .UserLevel_level__qEoj8 {
        align-items: center;
        background-color: #f1f9fc;
        border-radius: 8px;
        display: -ms-flexbox;
        display: flex;
        font-weight: 700;
        padding: 15px 12px;
    }
    
    .UserLevel_level-list__crSbk {
        display: flex;
        margin: 0 20px 0 14px;
    }
    
    .UserLevel_level-item__cuvd8 {
        background-color: #bfc4ff;
        height: 4px;
        margin-right: 10px;
        width: 40px;
    }
    
    .UserLevel_level-item-active__y6Q9e {
        background-color: #656efe;
    }
    
    .UserForm_form__CdhMk {
        /* align-items: center;
        background-color: #f1f9fc;
        border-radius: 8px;
        display: -ms-flexbox;
        display: flex;
        font-weight: 700;
        padding: 15px 12px; */
    }
    
    .UserForm_row__1tVYC {
        align-items: center;
        display: -ms-flexbox;
        display: flex;
        font-size: 14px;
        line-height: 30px;
        margin-top: 32px;
    }
    
    .UserForm_col__IHNDt {
        align-items: center;
        display: -ms-flexbox;
        display: flex;
        -ms-flex: 2 1;
        flex: 2 1;
    }
    
    .UserForm_row-icon__cbJV- {
        display: inline-block;
        height: 20px;
        margin-right: 14px;
        vertical-align: bottom;
        width: 20px;
    }
    
    .UserForm_col-btn__kjKyE {
        flex: 1 1;
    }
    
    /deep/.el-button--primary.is-plain {
        min-width: 80px;
    }
</style>

<!-- <script>
    import config from '../../config'
    export default {
        name: "information",
        data: function () {
            return {
                shopInformation: null,
                imgUrl:config.informationUrl
            }
        },
        created() {
            this.getUserInfo();
        },
        methods: {
            getUserInfo(){
                this.$HttpGet("/index.php?s=/admin/index/details").then(res => {
                    this.shopInformation = res.data
                    console.log(this.shopInformation)
                })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {

                    }
                });
            },
        }
    }
</script> -->

<!-- <style lang="scss" scoped>
    .information {
        .el-tabs--border-card {
            box-shadow: none;
            border: 0;
            border-top: 1px solid #DCDFE6;

            /deep/ .el-tabs__nav {
                border-left: 1px solid #DCDFE6;
            }
        }
        /deep/.el-form-item{
                .el-form-item__label{
                    font-weight: bold;
                }
        }
        .imgList {
            img {
                width: 110px;
                margin-right: 15px;
                margin-bottom: 15px;
            }
        }

        .hint {
            color: #ffa000;
            margin-bottom: 20px;

        }
    }

    .publicBoxTitle {
        margin-top: 20px;
    }
    .pubTitle{
        font-weight: 1000;
    }
</style> -->